<template>
  <view class="myQAToDo">
    <view class="top">
      <image class="top-icon" src="@/static/images/home/my_asnwer.png"></image>
      <view class="top-title">我的答疑待办</view>
      <view class="top-right" @tap="seeMore">
        <view class="top-right-title">查看更多</view>
        <up-icon
          name="arrow-right"
          class="top-right-arrow"
          size="14"
          color="#666"
        ></up-icon>
        <view style="width: 24rpx"></view>
      </view>
    </view>
    <StaticsGrid :list="list" @clickItem="clickItem" />
  </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { computed } from "vue";

import StaticsGrid from "./staticsGrid.vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

const list = computed(() => {
  return [
    {
      name: "未回复",
      count: props.data?.noReplyCount || 0,
    },
    {
      name: "追问未回复",
      count: props.data?.inquiryAoAnswerCount || 0,
    },
  ];
});
onLoad((options) => {});

const seeMore = () => {
  uni.navigateTo({
    url: `/pagesA/answer/record`,
  });
};

const clickItem = (index: number) => {
  if (
    Number(props.data?.noReplyCount || 0) === 0 &&
    Number(props.data?.inquiryAoAnswerCount || 0) === 0
  ) {
    return;
  }
  uni.navigateTo({
    url: `/pagesA/answer/detail?status=${index + 1}`,
  });
};
</script>

<style lang="scss" scoped>
.myQAToDo {
  margin-top: 24rpx;
  margin-left: 24rpx;
  width: calc(100vw - 48rpx);
  height: 232rpx;
  background: #ffffff;
  border-radius: 16rpx;
  .top {
    padding: 24rpx;
    padding-right: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40rpx;
    &-icon {
      width: 40rpx;
      height: 40rpx;
    }
    &-title {
      padding-left: 8rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #111111;
      line-height: 40rpx;
    }
    &-right {
      margin-left: auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 40rpx;
      &-title {
        font-size: 24rpx;
        color: #666666;
        line-height: 30rpx;
      }
      &-arrow {
        margin-left: 6rpx;
        // width: 28rpx;
        // height: 28rpx;
      }
    }
  }
}
</style>
